@import "./select";
@import "./select.md.vars";

// Material Design Select
// --------------------------------------------------

:host {
  --padding-top: #{$select-md-padding-top};
  --padding-end: #{$select-md-padding-end};
  --padding-bottom: #{$select-md-padding-bottom};
  --padding-start: #{$select-md-padding-start};
}

.select-icon {
  width: 19px;
  height: 19px;

  transition: transform .15s cubic-bezier(.4, 0, .2, 1);

  opacity: .55;

}

/**
 * Adjust the arrow so that it appears in the middle
 * of the item. If the item has fill="outline" then
 * we should adjust the entire ion-select rather than
 * just the outline so the selected value appears centered too.
 */
:host-context(.item-label-stacked) .select-icon,
:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,
:host-context(.item-label-floating.item-fill-outline) {
  @include transform(translate3d(0, -9px, 0));
}

:host-context(.item-has-focus) .select-icon {
  @include transform(rotate(180deg));
}

/**
 * Ensure that the translation we did
 * above is preserved when we rotate the select icon.
 */
:host-context(.item-has-focus.item-label-stacked) .select-icon,
:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)) .select-icon {
  @include transform(rotate(180deg), translate3d(0, -9px, 0));
}

:host-context(ion-item.ion-focused) .select-icon,
:host-context(.item-has-focus) .select-icon {
  color: var(--highlight-color-focused);

  opacity: 1;
}
